<template>
    <div class="body">
        <VHeader title="转让团队管理权" />
        <div class="title">友情提示：</div>
        <div class="subtitle">1、管理权接受者不能是其他团队队长</div>
        <div class="subtitle">2、转换管理权后您将成为团队队员</div>
        <div class="subtitle">3、接受者即为团队队长</div>
        <div class="subtitle">4、转换管理权不需要审核，即时生效</div>
        <div class="form">
            <div class="title">管理权接收者信息</div>
            <div class="flex">
                <div class="left">姓名：</div>
                <div class="right"><input v-model="realName" /></div>
            </div>
            <div class="flex">
                <div class="left">手机号：</div>
                <div class="right"><input v-model="mobile" /></div>
            </div>
        </div>
        <div class="flex flex-center buttons">
            <button class="apply" @click="submit">确认提交</button>
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant'
    export default {
        name: "Feedback",
        data(){
            return {
                realName: '',
                mobile: '',
            }
        },
        methods:{
            async submit(){
                Dialog.confirm({
                    title: '确认',
                    message: '您确定开始转移管理权吗？'
                }).then(async () => {
                    await this.$http({
                        method: 'api.team.conversionAdmin',
                        realName: this.realName,
                        mobile: this.mobile,
                    });
                    Dialog.alert({
                        title: '成功',
                        message: '转移管理权成功！'
                    }).then(() => {
                        this.$router.push('/user');
                    });
                }).catch(()=>{})
            }
        },
    };
</script>

<style lang="scss" scoped>
    .body {
        font-size: 14px;
        padding: 0 0.2rem 2rem;
    }
    .title {
        padding: 0.3rem 0;
        font-size: 120%;
        line-height: 110%;
        color:#F65D5D;
    }
    .subtitle {
        line-height: 130%;
    }
    .form {
        padding:1rem 0.3rem;
        margin-top: 0.3rem;
        border-top: 1px solid #d9d9d9;
        > .flex {
            padding: 0.1rem 0;
        }
        .left {
            padding: 10px;
            min-width: 60px;
        }
        .right {
            flex-grow: 1;
            input {
                line-height: 30px;
            }
            input, textarea {
                width:100%;
                border: 1px solid #e3e3e3;
            }
        }
    }
    .buttons {
        margin-top: 0.5rem;
        .apply {
            border:0;
            color: white;
            font-size: 130%;
            padding: 0.2rem 0;
            width: 85%;
            border-radius: 4px;
            background-color: #F65D5D;
        }
    }
</style>